import { Route,Switch,Link,Redirect} from 'react-router-dom';
import React from 'react'
import './Content.css';
import Home from './Home'
import Detail from './Detail';
import { useAuth } from './Context';

// const New = ({match})：解构match 
// const New = ({match:{path,url}}) :解构match中的path和URL
const New = ({match:{path,url}}) =>{
    return (
        <div>
            <h1>新手入门</h1>
            <div>
                {/* <Link to='/new/login'>Login</Link> */}
                <Link to={`${url}/login`}>Login</Link>
                <Link to={`${url}/api`}>Api</Link>
            </div>
            <div>
                <Switch>
                    {/* //得到一级路由的路径:match.path */}
                    <Route path={path + '/login'} component={Login} />   
                    <Route path={`${path}/api`} component={Api} />
                    {/* Redirect：默认重定向页面。放在最后一个原因：即前面都没匹配成功才会进行到最后一个Redirect */}
                    <Redirect to={path + '/login'}/>  
                </Switch>
            </div>
        </div>
    )
}
const Api = () =>{
    return <h1>Api页面</h1>
}
const Login = (props) =>{
    const {setIsLogin} = useAuth();
    
    // console.log(isLogin);
    const login = () =>{
        setIsLogin(true);
        // localStorage.setItem('userinfo','asdfghjkl');
        localStorage.setItem('isLogin',true);
        // props.history.replace('/')           //登录后直接返回首页
        props.history.replace(props.location.state || '/')   //登录后返回所在页面，登录页面登录返回首页

    }
    return <div>
        <button style={{width:100,height:50}} onClick={login}>登录</button>
    </div>
}
const Collect = () =>{
    return <h1>收藏页面</h1>
}
const User = () =>{
    return <h1>个人中心页面</h1>
}

// 把component之外的属性传过去     component:Com:将component重命名为Com
//组件的调用首字母一定要大写
const PrivateRoute = ({component:Com,...rest}) =>{//////////////////////component是什么,
     console.log(rest);                                              /////////////////////能否得到component
    return <Route {...rest} render={({location})=>{ 
        const userinfo = localStorage.getItem('isLogin')
        //若为真，则显示收藏页面。否则显示else中的页面
        if(userinfo){
            return <Com />      
        }else{
            // Redirect:即能js,又能跳转的路由
            return <Redirect to={{
                pathname:'/login',
                state:location.pathname
            }}/>
        }
    }}/>
}

const Content = () =>{
        return (
            <div className='conent-wrap'> 
            {/* 灰色背景 */}
                <div className='content'>
                {/* 内容居中 */}
                    <div className='content-left'>

                        {/* 有子路由的，不可带exact */}
                        <Switch>
                            <Route exact path='/' >
                                <Home />
                            </Route>     
                            {/* '/'匹配成功后就不再向后继续匹配 */}
                            <Route path='/home' >
                                <Home />
                            </Route>        
                            {/* <Route exact path='/' component={Home} />  */}
                            <Route path='/new' component={New} />
                            <Route path='/api' component={Api} />
                            <Route path='/login' component={Login} />
                            <Route path='/detail:id' component={Detail} />
                            <PrivateRoute path='/collect' component={Collect} />
                            <PrivateRoute path='/user' component={User} />
                            {/* 只要前面路径匹配成功，render自动执行，返回里面的函数；render就相当于一个组件 */}
                            {/* <PrivateRoute path='/user' render={()=>{
                                return <User />
                            }} /> */}
                            
                            {/* <PrivateRoute path='/a' render={()=>{}} /> */}

                        </Switch>

                    </div>
                        <div className='content-right'>
                    </div>
                </div>
            </div>
        )
}

export default Content
